import React, { Component, createRef } from 'react'

export default class FormOutControl extends Component {
    state = {
        uname: '李四',
        pwd: '123',
        sex: '0'
    }
    unameRef = createRef()
    pwdRef = createRef()
    sexRef = [createRef(),createRef()]
    save(e) {
        console.log('uname', this.unameRef.current.value);
        // console.log('sex', this.sexRef.find(item => item.current.checked).current.value);
        console.log('sex', this.sexRef.filter(item => item.current.checked === true)[0].current.value);

        e.preventDefault()
        
    }
  render() {
    let {uname ,pwd ,sex} =this.state
    return (
      <>
         <form action="" onSubmit={this.save.bind(this)}>
            <p>姓名： <input type="text" name="" ref={this.unameRef} id="uname" defaultValue={uname} /></p>
            <p>密码： <input type="text" name=""  ref={this.pwdRef} id="pwd" defaultValue={pwd} onChange={() => {}} /></p>
            <button type="submit">保存1</button>
            <button>保存2</button>
            <input type="submit" value="保存3" />
            <br />
            {/* 这是不能用于提交的 */}
            <button type="button">保存4</button>
            <p>性别：   男 <input type="radio" name="sex" ref={this.sexRef[0]} value="1" defaultChecked={sex === '1'} />
                        女 <input type="radio" name="sex"  ref={this.sexRef[1]} value="0" defaultChecked={sex==='0'} />
            </p>
        </form>
      </>
    )
  }
}
